<template>
  <div class="console-container">
    <el-row>
      <el-button type="primary" @click="goTask">任务目标管理</el-button>
      <el-button type="primary" @click="addLexicon">新建词库+</el-button>
    </el-row>
    <div class="tips">
      <el-alert
        :closable="false"
        title="温馨提示: 私有词库可以在同账号不同站点之间共享使用，不必重复添加。"
        type="info">
      </el-alert>
    </div>
    <div class="tableBtn btn">
      <el-select v-model="siteGroupId" placeholder="请选择站点状态" size="mini" @change="getList">
        <el-option label="全部词库" value=""></el-option>
        <el-option v-for="item in lexiconOption" :key="item.site_group_id" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 10px;" size="mini" @click="addGroups">新建分组</el-button>
      <el-button type="primary" size="mini" @click="editGroup">编辑分组</el-button>
      <el-button type="primary" size="mini" @click="delSiteGroup">删除分组</el-button>
    </div>
    <el-row :gutter="40">
      <el-col :span="18">
        <div class="content box">

        </div>
        <div class="footer">
          <div>共1个词库</div>
          <div>2词</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="detail box">

        </div>
        <div class="footer">最多显示前5万词</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'lexicon',
  components: {
  },
  data() {
    return {
      lexiconOption: [],
      siteGroupId: ''
    }
  },
  computed: {
  },
  methods: {
    goTask() {
      this.$router.push('/console/example/secure')
    },
    addLexicon() {
      console.log('123')
    },
    getList() {

    },
    addGroups() {

    },
    editGroup() {

    },
    delSiteGroup() {

    }
  }
}
</script>

<style lang="scss" scoped>
.console-container {
  padding: 21px 22px;
  .tips {
    margin: 14px 0;
  }
  .box {
    margin-top: 16px;
    height: 500px;
    border: 1px solid #ccc;
    border-radius: 8px 8px 0 0;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 8px 8px;
  }
}
</style>
